// 天地图
/* eslint-disable */
import coordtransform from 'coordtransform';
var THING = window.THING;
var _ = require('lodash');
// 字符串颜色转数字颜色
const Color = require('color-js');

class LwMap {
  /**
   * 全局对象：
   * this.map 真实的map对象
   * this.mapBox map中存放覆盖物的容器
   */

  /**
   * 构造方法
   * container: DOM ID
   * center: 中心点 eg: [116.404, 39.915] 北京
   * zoom: 缩放级别 {Number | Array(3)[zoom, minZoom, maxZoom]}
   */
  constructor(container, center = [116.404, 39.915], zoom = 13, extraConfig = {}) {
    var vm = this;
    var app = new THING.App({
      container: container,
      skyBox: 'MilkyWay'
    });
    vm.app = app;
    // 引用地图组件脚本
    vm.loadPromise = new Promise((resolve) => {
      THING.Utils.dynamicLoad(['./static/js/uearth/uearth.js'], function () {
        // 创建一个地球
        var map = app.create({
          type: 'Map',
          atmosphere: true, // 显示/隐藏 大气层 默认显示
          style: {
            night: true, // 开启/关闭 白天黑夜效果 默认开启
            fog: false // 开启/关闭 雾效 默认关闭
          },
          restrictedLevel: [0, 18]
        });

        // 创建一个瓦片图层
        var tileLayer = app.create({
          type: 'TileLayer',
          name: 'tileLayer1',
          // url: 'http://t{0,1,2,3,4}.tianditu.gov.cn/DataServer?T=vec_w&tk=c27c613115979d179e2794dcb248c29d&x={x}&y={y}&l={z}', // 84 矢量
          url: 'http://t{0,1,2,3,4}.tianditu.gov.cn/DataServer?T=img_w&tk=c27c613115979d179e2794dcb248c29d&x={x}&y={y}&l={z}', // 84 影像
          // url: 'http://2.20.101.180:32457/serviceaccess/service/ogcservice/wmts/wuxi_vector?service=WMTS&request=GetTile&version=1.0.0&layer=vec&style=default&tileMatrixSet=c&format=tiles&height=256&width=256&tilematrixSet=c&tk=56e2ef8967b3a0dbb746b7a40b7faa94&tilematrix={z}&tilerow={y}&&tilecol={x}', // 无锡 矢量
          // url: 'http://2.20.101.180:32457/serviceaccess/service/ogcservice/wmts/image2016?SERVICE=WMTS&REQUEST=GetTile&id=baseLayer_img&tk=a86c2aa4fe3f4d6c8c834dd01a75731d&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
          // url: 'https://mt0.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', // google
          style: {
            template: CMAP.TileLayerStyle.DARKBLUE, //  深蓝滤镜
          }
        });
        // 向地球添加一个瓦片图图层
        map.addLayer(tileLayer);
        vm.map = map;
        vm.mapBox = {}; // 所有地图元素的数组
        vm.originZoom = zoom[0];
        // vm.setCenterAndZoom(center, zoom[0]);
        var polygonLayer = vm.app.create({type: 'ThingLayer', name: 'polygonLayer'});
        vm.map.addLayer(polygonLayer);
        vm.object3Dlayer = polygonLayer;
        resolve();
      }, false);
      window.parent.app = THING.App.current;
    });
  }

  // 需要实现的方法
  /**
   * 地图移动
   * 参数 二维坐标
   */
  panTo(point) {
    this.map.panTo(point);
  }

  addControlBar(offset = [0, 0], zoom = 1) {
    // var vm = this;
    // vm.map.plugin(['T.ControlBar'], function () {
    //   vm.map.addControl(new T.ControlBar({
    //     showZoomBar: false,
    //     showControlButton: true,
    //     position: { left: offset[0], top: offset[1], zoom: zoom }
    //   }));
    // });
  }

  /**
   * 设置地图缩放级别
   * 参数 zoom
   */
  setZoom(zoom) {
    this.map.setZoom(zoom);
  }

  getZoom() {
    return this.map.getZoom();
  }

  /**
   * 设置地图缩放级别
   */
  setCenterAndZoom(point, zoom) {
    var p84 = coordtransform.gcj02towgs84(point[0], point[1]);
    var height = 25000 + (11.75 - this.originZoom) * 20000  - (zoom - this.originZoom) * 13000;
    this.app.camera.earthFlyTo({
      'time': 2000,
      'lonlat': p84,
      'height': height < 5000 ? 5000 : height,
        heading: -4.14669, // 方向 单位度
        tilt: 53, // 倾角 单位度
    });
  }

  /**
   * 增加标注物
   * 参数 id，url, 坐标点, 图片偏移，点击事件
   */
  addMarker(id, url, point, size, offset, onclick, params = {}, labelName) {
    var vm = this;
    var p84 = coordtransform.gcj02towgs84(point[0], point[1]);
    var pointLayer = vm.app.create({
      type: 'GeoPoint',
      name: labelName || 'pointLayer',
      coordinates: p84,
      userData: params,
      height: 50,
      renderer: {
        type: 'image',
        url: url,
        size: 4
      }
    });
    pointLayer = _.extend(pointLayer, params);
    pointLayer.style.alwaysOnTop = true;
    labelName && (pointLayer.label = {
      text: labelName,
      offset: [0, -30],
      fontColor: [255, 255, 0],
      fontSize: 16
    });
    this.__addObject(id, pointLayer);
    // vm.map.addLayer(pointLayer);
    onclick && pointLayer.on('click', onclick);
  }

  addBreatheMarker(id, url, point, size, offset, defaultShow, onclick, params, labelName) {
    var vm = this;
    var p84 = coordtransform.gcj02towgs84(point[0], point[1]);
    var marker = vm.app.create({
      type: 'GeoPoint',
      name: labelName || 'pointLayer',
      coordinates: p84,
      userData: params,
      height: 50,
      scale: [0.5, 0.5, 0.5],
      renderer: {
        type: 'image',
        url: url,
        size: parseInt(size[0] / 8),
        outlineEffect: true
      }
    });
    marker = _.extend(marker, params);
    marker.style.alwaysOnTop = true;
    labelName && (marker.label = {
      text: labelName,
      offset: [0, -30],
      fontColor: [255, 255, 0],
      fontSize: 16
    });
    marker.visible = false;
    vm.map.addLayer(marker);
    this.__addObject(id, marker);
    onclick && marker.on('click', onclick);

    marker.show = function () {
      this.visible = true;
      this.visible && this.scaleTo({
        scale: [1, 1, 1],
        time: 500
      });
    }
    marker.hide = function () {
      this.visible = false;
      this.scale = [0.5, 0.5, 0.5];
    }
    if (defaultShow) {
      marker.show();
    }

  }

  // 增加宽线
  addTextLabel(feature, height) {
    var text = new T.Text({
      text: feature.properties.name,
      verticalAlign: 'bottom',
      position: feature.properties.cp,
      height: height * 1.2,
      style: {
        'background-color': 'transparent',
        'text-align': 'center',
        'border': 'none',
        'color': 'white',
        'font-size': '16px'
        // ,
        // '-webkit-text-stroke': '0.5px #70ee70'
      }
    });
    this.__addObject(feature.id + '_text', text);
  }

  // 移除物体 参数 name : 需要删除物体的ID
  removeObject(name) {
    var obj = this.mapBox[name];
    if (obj) {
      obj.destroy();
      delete this.mapBox[name];
    }
  }

  add3DBoundaryByFeatureV2(feature, rgb, opacity = 0.7, height = 2000, zooms = '', onclick = '', type = '') {
    if (!onclick) {
      this.add3DBoundaryByFeatureV3(feature, rgb, opacity, height, zooms, type);
      return;
    }
    var bounds = [];
    feature.geometry.coordinates[0].forEach(function (i) {
      var p84 = coordtransform.gcj02towgs84(i[0], i[1]);
      bounds.push(p84);
    });
    var color = rgb || feature.properties.fillColor || this.__getRandomRgbColor();
    var geoPolygon = this.app.create({
      type: "GeoPolygon",
      name: feature.properties.name,
      coordinates: bounds,
      height: height / 5, // 拔起的高度 单位米
      renderer:
      {
        "type": "vector", // 纯色填充
        "color": color, // 填充色
        "opacity": opacity / 2, // 不透明度
        'outlineColor': [10, 219, 255], // 边框色
        "outlineWidth": 3, // 边框宽度
        outlineEffect: true
      }
    });
    geoPolygon.lwcolor = color;
    var labelText = this.app.create({
      type: "Marker",
      parent: geoPolygon,
      localPosition: [0, 2, 0],
      size: 4,
      keepSize: true,
      canvas: this.__createTextCanvas(feature.properties.name)
    });
    // labelText.style.outlineColor = '#ff0000';
    labelText.style.alwaysOnTop = true;

    if (onclick) {
      // 改变颜色
      geoPolygon.on('mouseenter', function () {
        geoPolygon.style.color = '#ffff00';
        labelText.style.color = '#ffffff'; // 因为会污染字组件的颜色
      });
      geoPolygon.on('click', function () {
        onclick();
      });

      // 还原颜色
      geoPolygon.on('mouseleave', function () {
        geoPolygon.style.color = geoPolygon.lwcolor;
        labelText.style.color = '#ffffff';
      });
    }

    this.object3Dlayer.add(geoPolygon);
  }

  add3DBoundaryByFeatureV3(feature, rgb, opacity = 0.7, height = 2000, zooms = '', type = '') {

    var bounds = [];
    feature.geometry.coordinates[0].forEach(function (i) {
      var p84 = coordtransform.gcj02towgs84(i[0], i[1]);
      bounds.push(p84);
    });
    var color = rgb || feature.properties.fillColor || this.__getRandomRgbColor();
    var geoPolygon = this.app.create({
      type: "GeoPolygon",
      name: feature.properties.name,
      coordinates: bounds,
      height: 10, // 拔起的高度 单位米
      renderer:
      {
        "type": "vector", // 纯色填充
        "color": color, // 填充色
        "opacity": opacity / 2, // 不透明度
      }
    });
    geoPolygon.lwcolor = color;
    var labelText = this.app.create({
      type: "Marker",
      parent: geoPolygon,
      localPosition: [0, 2, 0],
      size: 4,
      keepSize: true,
      canvas: this.__createTextCanvas(feature.properties.name)
    });
    // labelText.style.outlineColor = '#ff0000';
    labelText.style.alwaysOnTop = true;

    // 边效果
    var lineLayer = this.app.create({
      type: 'FeatureLayer',
      name: 'lineLayer',
      dataSource: {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "properties": {
              "type": "rain",
              "value": 5
            },
            "geometry": {
              "type": "MultiLineString",
              "coordinates": [bounds]
            }
          }]
       },
      geometryType: 'GeoLine',
      offsetHeight: 100,
      renderer: {
        type: 'image', // 贴图材质
        lineType: 'Plane', // 片状线
        imageUrl: './static/imgs/skyboxes/building.png', // 贴图路径
        // effect: true, // 是否开启发光特效
        speed: 0.3, // 流动速度
        width: 10 // 线的宽度
      }
    });
    this.map.addLayer(lineLayer);
    this.object3Dlayer.add(geoPolygon);
  }

  /**
   * 清除类型为type的所有网格
   */
  removeFeature() {
    var vm = this;
    vm.app.query('.GeoPolygon').destroyAll();
    vm.app.query('lineLayer').destroyAll();
  }

  /**
   * 设置轨迹路线
   * 轨迹数组 pathArr: [[a,b], [a,b]],
   * 图片路径 imgPath: url,
   * 图片大小 imgSize: [num,num],
   * 图片锚点 imgAncher: [num,num],
   * 图片标签名称 lableName: 'abc',
   * 图片标签偏移 labelOffset: [num,num],
   * 图片与锚点的位置 position: /BL、BM、BR、ML、MR、TL、TM、TR分别代表左下角、底部中央、右下角、左侧中央、右侧中央、左上角、顶部中央、右上角,
   * 轨迹线 lineColor: '#aaaa',
   * 轨迹线宽 lineWeight : num,
   * 点移动速度 speed : num,
   * return 点操控办法:start, pause, resume, stop, setSpeed, setPassLine
   */
  addMarkerAndPath(pathArr, imgPath, imgSize, imgAncher, lableName = '', labelOffset = [-35, 0], position = 'BM', lineColor = '#1104c7', lineWeight = 10, speed = 1000) {
    var vm = this;
    var marker = this.__buildElasticMarker(pathArr[0][0], imgPath, imgSize, imgAncher, lableName, labelOffset, position);
    pathArr = pathArr.map(apath => {
      return apath.map(path => {
        return coordtransform.gcj02towgs84(path[0], path[1]);
      });
    });
    marker.linkObject = [];
    this.removeMarkerAndPath();
    pathArr.forEach((apath) => {
      var polyline = vm.app.create({
				type: 'GeoLine',
				name: '路径',
        coordinates: apath,
        offsetHeight: 40,
				renderer: {
					type: 'vector',
					lineType: 'Plane',
          color: lineColor,
          width: lineWeight
				}
      });
      vm.object3Dlayer.add(polyline);
      marker.linkObject.push(polyline);
    });
    this.__addObject('pathAndMarker', marker);
    return {
      marker: marker,
      path: pathArr,
      map: this.map,
      status: 0, // 0 停止   1: 在跑  2: 暂停,
      speed: (7000 - speed) / 10,
      afterMoveTo: function () {
        this.run(this.speed);
      },
      init: function () {
        this.pointIndex = [0, 0];
      },
      run: function (v, reRun = false, startPoint = [0, 0]) {
        var vm = this;
        this.status = 1;
        if (v) {
          this.speed = (7000 - v) / 10;
        }
        if (reRun) {
          this.pointIndex = startPoint;
          this.marker.position = CMAP.Util.convertLonlatToWorld(this.path[startPoint[0]][startPoint[1]], 40);
          vm.run();
          return;
        }
        var index0 = this.pointIndex[0];
        var index1 = this.pointIndex[1];
        var currentPoint = this.path[index0][index1]; // 当前点
        var nextPoint = this.path[index0][index1 + 1];
        var vm = this;
        if (nextPoint) {
          index1++;
        } else {
          nextPoint = this.path[index0 + 1] && this.path[index0 + 1][0];
          if (nextPoint) {
            index0++;
            index1 = 0;
            this.pointIndex = [index0, index1];
            setTimeout(function () {
              vm.marker.moveTo({position: CMAP.Util.convertLonlatToWorld(vm.path[index0][index1], 40),
                speed: vm.speed,
                complete: () => {
                  vm.run();
                }
              });
            }, 200);
            return;
          } else {
            // 已经跑完了
            return;
          }
        }
        this.pointIndex = [index0, index1];
        var distance = Math.abs(currentPoint[0] - nextPoint[0]) + Math.abs(currentPoint[0] - nextPoint[0]);
        console.log(distance);
        if (distance < 0.00001) { // 两个点之间距离特别短的话，跳过
          this.run();
          return;
        }
        vm.marker.moveTo({position: CMAP.Util.convertLonlatToWorld(nextPoint, 40),orientToPath: true,time: this.speed,
          complete: () => {
            vm.run();
          }
        });
      },
      setSpeed: function (speed) {
        this.speed = (7000 - speed) / 10 ;
      },
      /**
       * 设置点暂停
       */
      pause: function () {
        if (this.status == 2) {
          return;
        }
        this.status = 2;
        this.marker.stopMoving();
      },
      changeStep: function (offset) {
        var status = this.status;
        if (this.pointIndex) {
          var index0 = this.pointIndex[0];
          var index1 = this.pointIndex[1] + offset;
          var len1 = this.path[index0].length;
          if (offset > 0) { // 快进
            if (index1 >= len1) {
              if (this.path[index0 + 1]) {
                index0 += 1;
                index1 = 0;
              } else {
                index1 = len1 - 1;
              }
            }
          } else { // 快退
            if (index1 < 0) {
              if (index0 - 1 >= 0) {
                index0 -= 1;
                index1 = this.path[index0].length + index1;
                index1 < 0 && (index1 = 0);
              } else {
                index0 = 0;
                index1 = 0;
              }
            }
          }
          status == 1 && this.run(this.speed, true, [index0, index1]);
          if (status == 2) {
            this.pointIndex = [index0, index1];
            this.marker.position = CMAP.Util.convertLonlatToWorld(this.path[[index0]][index1], 40);
          }
        }
      },
      /**
       * 设置点继续移动
       */
      resume: function () {
        if (this.status == 1) {
          return;
        }
        this.status = 1;
        var index0 = this.pointIndex[0];
        var index1 = this.pointIndex[1];
        this.run(0, true, [index0, index1]);
      },
      /**
       * 设置点停止
       */
      stop: function () {
        if (this.status == 0) {
          return;
        }
        this.pointIndex = [0, 0];
        this.status = 0;
        this.marker.stopMoving();
      }
    };
  }

  addMarkerAndPathV2(pathArr, imgPath, imgSize, imgAncher, lableName = '', labelOffset = [-35, 0], position = 'BM', lineColor = '#1104c7', lineWeight = 10, speed = 1000) {
    var vm = this;
    var marker = this.__buildElasticMarker(pathArr[0], imgPath, imgSize, imgAncher, lableName, labelOffset, position);

    pathArr = pathArr.map(path => {
      return coordtransform.gcj02towgs84(path[0], path[1]);
    });
    marker.linkObject = [];
    this.removeMarkerAndPath();
    // var polyline = vm.app.create({
    //   type: 'GeoLine',
    //   name: '路径',
    //   coordinates: [pathArr[0]],
    //   offsetHeight: 40,
    //   renderer: {
    //     type: 'vector',
    //     lineType: 'Plane',
    //     color: lineColor,
    //     width: lineWeight
    //   }
    // });

    var polyline = vm.app.create({
      type: 'Line',
      color: 0x00FF00, // 轨迹线颜色
      dotSize: 2, // 轨迹点的大小
      dotColor: 0xFF0000, // 轨迹点的颜色
      points: [CMAP.Util.convertLonlatToWorld(pathArr[0], 40)],
    });
    vm.object3Dlayer.add(polyline);
    marker.linkObject.push(polyline);
    this.__addObject('pathAndMarker', marker);

    return {
      map: vm.map,
      marker,
      speed: speed,
      polyline,
      historyArr: [],
      pathArr,
      afterMove: function (foo) {
        this.afterMoveCallback = foo;
      },
      start: function (speed) {
        var vm = this;
        THING.App.current.camera.earthFlyTo({
          'time': 1000,
          'lonlat': pathArr[0],
          'height': 1000,
          heading: -4.14669, // 方向 单位度
          tilt: 80, // 倾角 单位度
          complete: function () {
            vm.marker.movePath({
              path: pathArr.map(p => {return CMAP.Util.convertLonlatToWorld(p, 40);}),
              time: pathArr.length * 100,
              update: (e) => {
                vm.polyline.addPoint(e.toPosition);
              },
              complete: () => {
                vm.afterMoveCallback();
              }
            });
          }
        });
      },
      addPath: function (arr) {
        var vm = this;
        vm.marker.movePath({
          path: arr.map(path => {
            return CMAP.Util.convertLonlatToWorld(coordtransform.gcj02towgs84(path[0], path[1]), 40);
          }),
          time: arr.length * 100,
          update: (e) => {
            vm.polyline.addPoint(e.toPosition);
          },
          complete: () => {
            vm.afterMoveCallback();
          }
        });
      }
    };
  }

  // 移除
  removeMarkerAndPath() {
    var oldMarker = this.mapBox.pathAndMarker;
    if (oldMarker) {
      oldMarker.pauseEvent('moveTo');
      var linkObjs = oldMarker.linkObject;
      if (linkObjs) {
        var map = this.map;
        linkObjs.forEach((n) => {
          n.visible = false;
        });
        oldMarker.visible = false;
      }
    }
  }
  getRotationAndPitch(){}
  /**
   * 清除地图图标
   */
  clearActivities(foo) {
    var vm = this;
    !foo && (foo = (n) => n.lwType == 'activity' || (n.lwType && n.lwType.includes('Marker')));
    // vm.app.query('.GeoPoint').destroyAll();

    var keys = Object.keys(vm.mapBox)
    var flag = false;
    keys.forEach(key => {
      var obj = vm.mapBox[key];
      if (foo(obj)) {
        flag = true;
        vm.removeObject(key);
      }
      // obj.visible = false;
    });
    if (flag) {
      vm.map.addLayer(vm.object3Dlayer);
    }
  }

  showInfoWindow(content, position, anchor = 'bottom-center') {
    var vm = this;
    if (!window.closeInfoWindow) {
      window.closeInfoWindow = function () {
        event.stopPropagation();
        vm.infoWindowPoint.destroy();
        vm.infoWindowPoint = null;
      }
    }
    vm.infoWindowPoint && vm.infoWindowPoint.destroy();
    if (!content) {
      return;
    }
    var p84 = coordtransform.gcj02towgs84(position[0], position[1]);
    var infoWindowHtml = `<div class="amap-info" style="width:unset;"><div class="amap-info-shadowContainer" style="width:498px;height:268px;display: block;"></div><div style="position: absolute; bottom: 0px; left: 0px;"><div class="bottom-center amap-info-contentContainer"><div class="amap-info-content amap-info-outer">${content}<a class="amap-info-close" onclick="closeInfoWindow()" href="javascript: void(0)" style="right: 5px;">×</a></div><div class="amap-info-sharp"></div></div></div></div>`;
    vm.infoWindowPoint = this.app.create({
      type: 'GeoPoint',
      name: 'geoPoint0',
      coordinates: p84,
      renderer: {
        size: 0  // 尺寸
      },
      infoWindow:
        {
          'displayMode': CMAP.DisplayMode.Always,//点击显示
          'type': CMAP.InfoWindowType.Custom,//自定义InfoWindow
          'customHtml': infoWindowHtml
        },
    });
    // this.map.addLayer(geoPoint);
    /*
    var infoWindow = new T.InfoWindow({
      anchor,
      content,
      closeWhenClickMap: true
    });
    this.infoWindow = infoWindow;
    infoWindow.open(this.map, position);
    */
  }

  showCustomInfoWindow(content, position, anchor = 'bottom-left yymtest') {
    var infoWindow = new T.InfoWindow({
      isCustom: true,
      showShadow: true,
      autoMove: true,
      closeWhenClickMap: true,
      content,
      anchor
    });
    this.infoWindow = infoWindow;
    infoWindow.open(this.map, position);
  }

  closeInfoWindow() {
    this.infoWindow && this.infoWindow.close();
  }

  // 增加动画效果 物体 动画名称 持续时间
  setAnimation(obj, name = 'DROP', time) {
    var vm = this;
    if (obj && obj.setAnimation) {
      obj.setAnimation('T_ANIMATION_' + name);
      if (time) {
        setTimeout(function () {
          vm.removeAnimation(obj);
        }, time);
      }
    }
  }

  removeAnimation(obj) {
    obj.setAnimation('T_ANIMATION_NONE');
  }

  __bd2decrypt = function (lng, lat) {
    var X_PI = Math.PI * 3000.0 / 180.0;
    var x = lng - 0.0065;
    var y = lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
    return new T.LngLat(z * Math.cos(theta), z * Math.sin(theta));
  };


  __buildElasticMarker (position, imgPath, imgSize, imgAncher, lableName) {
    var p84 = coordtransform.gcj02towgs84(position[0], position[1]);
    var marker = this.app.create({
      type: 'GeoPoint',
      name: 'pathRuner',
      coordinates: p84,
      height: 50,
      renderer: {
        type: 'image',
        url: imgPath,
        size: parseInt(imgSize[0] / 8)
      },
      label: {
        text: lableName || ' ',
        offset: [0, -30],
        fontColor: [255, 255, 0],
        fontSize: 16
      }
    });
    marker.style.alwaysOnTop = true;
    return marker;
  }
  // 私有方法
  __addObject(id, marker) {
    var obj = this.mapBox[id];
    if (obj) {
      // 已经有了
      var linkObjs = obj.linkObject;
      if (linkObjs) {
        linkObjs.forEach((n) => {
          n.visible = false;
        });
      }
      obj.visible = false;
    }
    this.object3Dlayer.add(marker);
    this.mapBox[id] = marker;
  }
  __getRandomRgbColor() {
    return new Array(3).fill(255).map((o) => {
      return o * Math.random();
    });
  }

  __createTextCanvas (text, canvas) {
    if (!canvas) {
      canvas = document.createElement("canvas");
      canvas.width = text.length * 48;
      canvas.height = 48;
    }

    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.font = "24px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(text, canvas.width / 2, 24);
    return canvas;
  }

}
export default LwMap;
